<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
            color: #bfcccc;
        }
        .one{
            width: 1200px;
            text-align: center;
            background-color: #bfcccc;
        }
        .rom{
            content: "";
            display: table;
            clear: both;
        }
        .one ul li{
            display: inline-block;
            float: left;
            line-height: 50px;
            width: 300px;
        }
        .one-a{
            position: relative;
        }
        .two{
            position: absolute;
            display: none;
        }
        .two a{
            display: block;
            width: 300px;
            line-height: 50px;
            color: #02e7fb;
            background-color: #5079d9;
        }
        .one-a .two:hover{
            display: block;
        }
    </style>
</head>
<body>
<div class="one rom">
    <ul>
        <li class="one-a">女装
        <div class="two">
            <a href="#">上衣</a>
            <a href="#">下装</a>
            <a href="#">连衣裙</a>
        </div>
        </li>
        <li>男装</li>
        <li>包包</li>
        <li>鞋子</li>
    </ul>
</div>
</body>
</html>